<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="username">
    <input type="password" name="" id="password">
    <button class="login">登录</button>
    <button onclick="changeUl()">切换</button>
    <ul class="list" style="display:none ;">
        <!-- <li>
            <p>张三</p>
            <p>****</p>
            <button>删除</button>
        </li> -->
    </ul>
    <script>
        /* 
        api抄写一遍 加注释
           document.querySelector 根据选择器选择dom元素
           ipt.value 获取输入框的值
           ul.innerHTML = 'aa'  修改元素内部html代码
           dom.onclick = function(){}  给元素添加点击是


           创建 
           var arr = []
           arr.push()
           arr.forEach()


           拼接字符串--   'a' +'b'  模板字符串  `${变量}`

        
        */

        /*
            0-准备一个空数组--用来存  留言（用户的）信息
            1-发布功能
                点击登录按钮的时候，获取输入框的值，创建一个对象，存入数组中，  调用列表功能
            2-列表功能
                遍历lyArr ，拼接 li 字符串--》ul.innerHTML 属性

            3-删除功能
                行内的事件     

                需要在列表功能里面，添加行内事件
                     <button onclick="delFn()">删除</button>
                     <button onclick="delFn(${i})">删除</button>
                定义一个全局delFn 函数     


                删除函数内部---删除对应数组中元素，重新加载列表

           4- 数据持久化 --数据存入本地
            如果存入是一个字符串 直接存，如果存入的是数组或者对象，先转为json字符串， 再存入
            localstorage.setItem(key,value)  
            
                4-1  
                    发布存下
                    删除存下
                    一开始，先读取本地数据，如有 转为数组，赋值给userInfoArr， 重新加列表

            5-        
                    //5- 切换 ul的显示和隐藏-
                // 行内事件--点击事件
                // 判断 行内样式 display 为 none 设置 block 
                // 如果block 就设置为none

            6-  列表中p标签 添加点击事件，  行内事件   
                <p onclick="selectUser(${i})">${v.username}</p>
                定义selectUser函数
        */
        //    0- 
        let userInfoArr = [];
        //4-  一开始，先读取本地数据，如有 转为数组，赋值给userInfoArr， 重新加列表
        let jsonStr = localStorage.getItem('userInfo');
        if (jsonStr !== null) {
            //说明本地有userInfo数据
            // 转为数组，赋值给userInfoArr， 重新加列表
            userInfoArr = JSON.parse(jsonStr)
            loadList()
        }


        // 1-发布功能
        //         点击登录按钮的时候，获取输入框的值，创建一个对象，存入数组中，  调用列表功能
        //1-2 给发布按钮添加点击事件 
        // 获取按钮
        var loginBtn = document.querySelector('.login');
        // 获取输入框
        var usernameIpt = document.querySelector('#username');
        var passwordIpt = document.querySelector('#password');

        loginBtn.onclick = function () {
            //1-3 获取输入框的值，
            // 获取输入框
            var usernameIpt = document.querySelector('#username');
            var passwordIpt = document.querySelector('#password');

            var username = usernameIpt.value;
            var password = passwordIpt.value;

            // 1-4创建一个对象
            // 变量名作为属性名，变量值 作为属性值
            let obj = { username: username, password };

            //1-5 存入数组中
            userInfoArr.push(obj);
            console.log(userInfoArr);

            // 1-6- 调用列表功能
            loadList()

            // 1-7清空输入框值
            usernameIpt.value = ''
            passwordIpt.value = ''


            // 4- 存入本地
            localStorage.setItem('userInfo', JSON.stringify(userInfoArr))

        }


        // 2-列表功能
        // 遍历lyArr ，拼接 li 字符串--》ul.innerHTML 属性

        function loadList() {
            let str = '';
            // 遍历lyArr 
            // 每次遍历 都得到一个新的 li字符串 ，加懂啊 str变量中
            userInfoArr.forEach(function (v, i) {
                str += `
                    <li>
                        <p onclick="selectUser(${i})">${v.username}</p>
                        <button onclick="delFn(${i})">删除</button>
                    </li> `
            });

            // 给所有的li字符串给ul
            // ul.innerHTML 属性
            var listUl = document.querySelector(".list");
            listUl.innerHTML = str;
        }


        // 删除功能
        // 列表生成的时候，添加行内事件，传入i过来--<button onclick="delFn(${i})">删除</button>
        function delFn(index) {
            console.log('delFn');
            // 删除按钮 对应 数组中元素下标
            console.log(index);
            // 根据下标删除数组元素

            // 删除指定位置的一个元素
            userInfoArr.splice(index, 1)
            console.log(userInfoArr);

            // 重新加载列表
            loadList()


            // 4- 存入本地
            localStorage.setItem('userInfo', JSON.stringify(userInfoArr))


        }


        //5- 切换 ul的显示和隐藏-
        // 行内事件--点击事件
        // 判断 行内样式 display 为 none 设置 block 
        // 如果block 就设置为none
        function changeUl() {
            let listUl = document.querySelector('.list');
            if (listUl.style.display == 'none') {
                listUl.style.display = 'block'
            } else {
                listUl.style.display = 'none'

            }
        }


        // 
        function selectUser(i) {
            console.log(i);

            // 根据下标找到数组中 元素--对象
            var userObj = userInfoArr[i]
            // console.log(userObj);


            // 解构赋值，获取userObj里面的username 和password属性值
            // 变量名 必须根 对象里面的属性名一样


            // // 对象中 username 和password 属性 赋值 给输入框
            // usernameIpt.value = userObj.username;
            // passwordIpt.value = userObj.password;


            let { username, password } = userObj;
            usernameIpt.value = username;
            passwordIpt.value = password;

            // 
            let listUl = document.querySelector(".list");
            listUl.style.display = 'none'

        }
    </script>

</body>

</html>